<h2>Add teaching session</h2>
<div>
<form method="post" action="${currentPath}">
	<input type="hidden" name="courseId" value="${session.course.id?c}" />
	<p>
		<label for="name">Name: </label>
		<input type="text" id="name" name="name" value="" />
	</p>
	<p>
		<label for="sessionType">Session Type: </label>
		<select id="sessionType" name="sessionType">
			<option value='0'>Lecture</option>
			<option value='1'>Tutorial</option>
			<option value='2'>Lab</option>		
		</select>
	</p>
	<p>
		<label for="date">Session Date: </label>
		<input name="date" type="text" value="${session.date?date?string("MM-dd-yyyy HH:mm")}" />
	</p>
	<p>
		<label for="teacherId">Assigned to: </label>
		<select id="teacherId" name="teacherId">
		</select>
	</p>
	<p>
		<label for="roomId">Room: </label>
		<select name="roomId">
			<#list rooms as r>
				<option value='${r.id?c}'>${r.name}</option>
			</#list>
		</select>
	</p>
	
	<p>
		<input type="submit" value="Submit" />
	</p>
	
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#sessionType').change(function(){
	var baseUrl = '${rootPath}/courses/${session.course.id?c}/';
	var type = $('#sessionType').val();
	if(type == 0)
		baseUrl += 'json_lecturers';
	else baseUrl += 'json_tutors';
	$.ajax({
			url: baseUrl,
			type: 'GET',
			dataType: 'json',
			error:function(error) {
				alert(error.responseText);
			},
			success: function(data){
				$('#teacherId').html('');
				
				for(i = 0; i < data.length; ++i){	
					
					$('#teacherId').append($("<option>").val(data[i].id).html(data[i].firstName + " " + data[i].lastName));
				}
			}
	});
});
	
});
</script>